import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Modal } from 'antd';
import type { TableProps } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { delData, getList } from '../../../../store/module/list';
import { getData } from '../../../../api';

type Props = {}

interface DataType {
  key: string;
  name: string;
  age: number;
  city: string;
  phone: number;
}

const List = (props: Props) => {
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '编号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '城市',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      key: 'action',
      render: (record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => edit(record)}>编辑</Button>
          <Button type='primary' danger onClick={() => del(record.key)}>删除</Button>
        </Space>
      )
    }
  ];

  const dispatch = useDispatch();
  const [isModalOpen, setIsModalOpen] = useState(false);
  // const [title, setTitle] = useState('');

  useEffect(() => {
    getData().then(res => {
      dispatch(getList(res.data.data.list));
    })
  }, [])

  const list = useSelector((state: any) => {
    return state.list.searchList;
  })

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const del = (key: number) => {
    dispatch(delData(key));
  }

  const edit = (record: object) => {
    console.log(record);
  }

  return (
    <div>
      <Button type="primary" onClick={showModal}>新增信息</Button>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
      <Table columns={columns} dataSource={list} pagination={{ defaultPageSize: 6 }} />
    </div>
  )
}

export default List